<script setup lang="ts">
interface Props {
  hideTabBar: boolean
  color?: string
  activeColor?: string
  iconSize?: string | number
  // 是否启用底部安全区域适配
  useSafeArea?: boolean
  // 额外的内容区域底部padding
  extraPadding?: number
}

const props = withDefaults(defineProps<Props>(), {
  hideTabBar: true,
  color: '#8C8C8C',
  activeColor: '#2B65FF',
  useSafeArea: true,
  extraPadding: 0,
})

// 获取系统信息
const systemInfo = uni.getSystemInfoSync()
const isIOS = systemInfo.system.toLowerCase().includes('ios')

// 计算底部安全区域高度
const safeAreaBottom = computed(() => {
  if (!props.useSafeArea)
    return 0
  return systemInfo.safeAreaInsets?.bottom || 0
})

// 计算内容区域的底部padding
const contentPaddingBottom = computed(() => {
  const tabbarHeight = 50 // Tabbar 基础高度
  const safeAreaHeight = props.useSafeArea ? safeAreaBottom.value : 0
  const extraPadding = props.extraPadding

  return props.hideTabBar
    ? `${tabbarHeight + safeAreaHeight + extraPadding}px`
    : `${extraPadding}px`
})
</script>

<template>
  <view class="page-wrapper">
    <!-- 内容区域 -->
    <view
      class="content-wrapper"
      :class="{
        'has-tabbar': hideTabBar,
        'safe-area-enabled': useSafeArea,
      }"
      :style="{
        paddingBottom: contentPaddingBottom,
      }"
    >
      <slot />
    </view>

    <!-- 自定义Tabbar -->
    <gi-custom-tabbar
      v-if="hideTabBar"
      v-bind="$props"
      :safe-area-bottom="safeAreaBottom"
    />
  </view>
</template>

<style scoped lang="scss">
.page-wrapper {
  position: relative;
  width: 100%;
  min-height: 100vh;
  box-sizing: border-box;
  background-color: #f5f5f5;

  .content-wrapper {
    position: relative;
    width: 100%;
    min-height: 100vh;
    box-sizing: border-box;

    &.has-tabbar {
      &.safe-area-enabled {
        // 在支持安全区域的设备上使用 CSS 环境变量
        @supports (padding-bottom: env(safe-area-inset-bottom)) {
          padding-bottom: calc(50px + env(safe-area-inset-bottom));
        }
      }
    }

    // 针对 iOS 刘海屏顶部适配
    @supports (padding-top: constant(safe-area-inset-top)) {
      padding-top: constant(safe-area-inset-top);
    }
    @supports (padding-top: env(safe-area-inset-top)) {
      padding-top: env(safe-area-inset-top);
    }
  }
}

// 针对不同平台的特殊处理
/* #ifdef H5 */
.page-wrapper {
  height: 100vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
/* #endif */

/* #ifdef APP-PLUS */
.page-wrapper {
  // APP端可能需要的额外样式
  .content-wrapper {
    // 处理 iOS 导航栏透明度
    &.safe-area-enabled {
      padding-top: var(--status-bar-height);
    }
  }
}
/* #endif */

/* #ifdef MP-WEIXIN */
.page-wrapper {
  // 微信小程序特殊处理
  .content-wrapper {
    padding-top: 0;
  }
}
/* #endif */
</style>
